/*
1. 安装     npm i vue-router
2. 导入     import VueRouter from 'vue-router
3. 注册     Vue.use(VueRouter)
4. 实例化   
    const router = new VueRouter({
        routes: [
            {
                path: "",
                component: 组件名
            }
        ]
    })
export default router
import router from './router'
5. 注入到 new Vue({ router  // router: router })
6. 路由出口     router-view
*/


// 导入路由
import VueRouter from 'vue-router'
// 导入 vue
import Vue from 'vue'
// 注册路由
Vue.use(VueRouter)

// 导入login组件
import login from '@/views/login/login.vue'
import layout from '@/views/layout/layout.vue'
import chart from '@/views/layout/chart/chart.vue'
import userList from '@/views/layout/userList/userList.vue'
import question from '@/views/layout/question/question.vue'
import business from '@/views/layout/business/business.vue'
import subject from '@/views/layout/subject/subject.vue'

// 路由实例化
const router = new VueRouter({
    routes: [
        // 路由重定向
        {
            path: '/',
            redirect: '/login'
        },
        {
            path: '/login',
            component: login,
            meta: {
                title: '登录',
                roles: ['超级管理员', '管理员', '老师', '学生']
            }
        },
        {
            path: '/layout',
            component: layout,
            redirect: '/layout/chart',
            children: [{
                    path: '/layout/chart',
                    component: chart,
                    meta: {
                        title: '数据概览',
                        roles: ['超级管理员', '管理员', '老师'],
                        icon: 'el-icon-pie-chart'
                    }
                }, // 两种写法： 1.相对写法： 不带/layout  2.完整写法： /layout/chart
                {
                    path: '/layout/userList',
                    component: userList,
                    meta: {
                        title: '用户列表',
                        roles: ['超级管理员', '管理员'],
                        icon: 'el-icon-user-solid'
                    }
                },
                {
                    path: '/layout/question',
                    component: question,
                    meta: {
                        title: '题库列表',
                        roles: ['超级管理员', '管理员', '老师'],
                        icon: 'el-icon-edit-outline'
                    }
                },
                {
                    path: '/layout/business',
                    component: business,
                    meta: {
                        title: '企业列表',
                        roles: ['超级管理员', '管理员', '老师'],
                        icon: 'el-icon-office-building'
                    }
                },
                {
                    path: '/layout/subject',
                    component: subject,
                    meta: {
                        title: '学科列表',
                        roles: ['超级管理员', '管理员', '老师', '学生'],
                        icon: 'el-icon-notebook-2'
                    }
                },
            ]
        }
    ]
})

// vue的bug、可以写一个点击跳转第二次就会报错、百度复制这段就ok     (面试题)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

// 导入nprogress插件与样式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 导入store
import store from '@/store/index.js'
// 导入Element-ui
import {
    Message
} from 'element-ui'

// 路由导航守卫
// 路由前置守卫（还没进入目标路由）
// 路由拦截处理
router.beforeEach((to, from, next) => {
    // to：去的路由的信息   $route
    // from：从哪来的路由信息   $route
    // console.log('to', to);
    // console.log('from', from);

    NProgress.start()

    if (!to.meta.roles.includes(store.state.role)) {
        // 提示
        Message.error('您无权访问该页面')
        // 当前页不跳转
        next(from.path)
        // 结束进度
        NProgress.done()

    } else {
        next() // 允许通过 next()  不允许通过 next(path地址)
    }




})
// 路由后置守卫（已进入目标路由）
router.afterEach((to, from) => {
    console.log('to', to);
    console.log('from', from);

    // document.getElementById('title').innerText = to.meta.title
    document.title = to.meta.title

    // if(to.path == '/layout/chart') {
    //     document.getElementById('title').innerText = '数据概览'
    // } else if (to.path == '/layout/userList') {
    //     document.getElementById('title').innerText = '用户列表'
    // }



    // 也可以设置倒计时定时器   (右边有个小圈圈、记得隐藏)
    // setTimeout(() => {

    // 结束进度
    NProgress.done()

    // }, 2000);
})


// 输出路由
export default router